<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>平台组件管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript"
            src="../lib/vue/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/global.js"></script>
    <script type="text/javascript" src="../js/store.js"></script>
    <script type="text/javascript" src="../js/cookies.js"></script>
    <script src="../lib/vue/vue.min.js"></script>
    <script src="../lib/vue/axios.min.js"></script>
</head>
<body>
<div class="x-body layui-anim layui-anim-up">
    <form class="layui-form">
        <!--<div class="layui-form-item" hidden>
            <div class="layui-input-inline">
                <input type="text" id="L_companyId" name="companyId" required=""
                       autocomplete="off" class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item" hidden>
            <label class="layui-form-label">所属公司</label>
            <div class="layui-inline" style="width: 300px;">
                <input type="text" id="L_companyName" name="companyName" autocomplete="off" class="layui-input"
                       readonly>
            </div>
        </div>
        <div class="layui-form-item" hidden>
            <div class="layui-input-inline">
                <input type="text" id="L_sysId" name="sysId" required=""
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" hidden>
            <label class="layui-form-label">所属系统</label>
            <div class="layui-inline" style="width: 300px;">
                <input type="text" id="L_sysName" name="sysName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" hidden>
            <div class="layui-inline" style="width: 300px;">
                <label class="layui-form-label">组件详情id</label>
                <div class="layui-input-block">
                    <input type="text" id="L_componentInfoId" name="componentInfoId" class="layui-input">
                    </input>
                </div>
            </div>
        </div>
        <div class="layui-form-item" hidden>
            <div class="layui-inline" style="width: 300px;">
                <div class="layui-input-block">
                    <input type="text" id="L_envName" name="envName" class="layui-input">
                    </input>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline" style="width: 300px;">
                <label class="layui-form-label">环境名称</label>
                <div class="layui-input-block">
                    <select type="text" id="L_envId" name="envId" lay-verify="envNameKey" lay-filter="envNameKey">

                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="padding-top: 100px">
            <label class="layui-form-label">
            </label>
            <button class="layui-btn" lay-filter="add" lay-submit="">
                点击添加
            </button>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'layer'], function () {
            $ = layui.jquery;
            let form = layui.form
                , layer = layui.layer

            var componentInfoId = parent.$("#componentInfoId").val();
            $('#L_companyName').val(getCookie('companyName'))
            $("#L_sysName").val(getCookie('sysName'))
            $("#L_sysId").val(parseInt(getCookie('sysId')))
            $("#L_componentInfoId").val(componentInfoId)
            let envArray;
            //获取组件环境列表
            $.get(_hostUrl + '/cmsEnvs/page', function (res) {
                if (res.responseCode != 200) {
                    layer.msg(res.responseMsg, {icon: 2, time: 1500});
                    return
                }
                envArray = res.data.resultList;
                if (!envArray || envArray.length == 0) {
                    layer.msg("还未创建组件环境信息!")
                } else {
                    for (let i = 0; i < envArray.length; i++) {
                        $('#L_envId').append(new Option(envArray[i].envName, envArray[i].id))
                    }
                    $('#L_envId').val(parseInt(getUrlKey('id')));
                    form.render();
                }
            });
            form.on('select(envNameKey)', function (data) {
                //获取环境名称
                $.get(_hostUrl + '/cmsEnv/' + data.value, function (res) {
                    if (res.responseCode != 200) {
                        layer.msg(res.responseMsg, {icon: 2, time: 1500});
                        return
                    } else {
                        $('#L_envName').val(res.data.envName);
                        form.render();
                    }
                })
            });
            //自定义验证规则
            form.verify({
                envNameKey: function (value) {
                    if (null == value) {
                        return '请选择环境'
                    }
                }
            });
            //监听提交
            form.on('submit(add)', function (data) {
                layer.confirm('请再次确认该组件版本已经在所选环境上成功运行？', {
                        icon: 3, title: '添加环境关联',btn: ['确认','取消']
                    }, function () {
                        $.post(_hostUrl + "/cmsComponentInfoEnv", data.field, function (res) {
                            if (res.responseCode == 201) {
                                layer.msg('添加成功,请前往组件使用详情页面查看', {
                                    icon: 1,
                                    time: 2000
                                }, function () {
                                    // 获得frame索引
                                    let index = parent.layer.getFrameIndex(window.name)
                                    //关闭当前frame
                                    parent.layer.close(index)
                                });
                            } else {
                                layer.msg(res.responseMsg, {icon: 2, time: 1500})
                            }
                        },'json');
                    },function () {
                    layer.msg('已取消..',{icon: 2, time: 1500});
                    return false;
                    });
                return false;
            });
        }
    )
</script>
</body>

</html>